<template>
  <div class="friends-page">
    <el-row>
      <el-col :span="6">
        <el-card class="friends-list">
          <div slot="header" class="clearfix">
            <el-input v-model="searchQuery" placeholder="搜索好友" @input="searchFriends" clearable />
            <el-button type="primary" @click="addFriend">新增好友</el-button>
          </div>
          <el-menu class="el-menu-vertical-demo" :default-active="activeMenu" @select="chatWithFriend">
            <el-menu-item v-for="friend in filteredFriends" :key="friend.id" :index="friend.id.toString()">
              <el-avatar :src="friend.avatar" />
              <span class="friend-name">{{ friend.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="chat-box">
          <div slot="header" class="clearfix">
            <span>{{ currentFriend ? currentFriend.name : '选择一个好友开始聊天' }}</span>
          </div>
          <div class="messages">
            <div v-for="message in messages" :key="message.id" :class="{'message': true, 'self-message': message.self}">
              <el-avatar :src="message.avatar" :class="{'self-avatar': message.self}" />
              <div class="message-content">
                <span class="message-username">{{ message.username }}</span>
                <p v-if="!message.image">{{ message.content }}</p>
                <img v-if="message.image" :src="message.image" alt="uploaded image" class="uploaded-image"/>
                <span class="message-time">{{ message.time }}</span>
              </div>
            </div>
          </div>
          <div class="input-area">
            <el-input v-model="newMessage" placeholder="输入消息..." @keyup.enter="sendMessage">
              <template #append>
                <el-button @click="sendMessage">发送</el-button>
              </template>
            </el-input>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-success="handleUploadSuccess"
              :file-list="fileList"
              list-type="picture"
              :show-file-list="false">
              <el-button icon="el-icon-upload" class="upload-button">上传图片</el-button>
            </el-upload>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      friends: [
        { id: 2, name: 'Gleak', avatar: 'src/assets/images/wx.png' },
        { id: 3, name: 'whm', avatar: 'src/assets/images/whm.png' },
      ],
      searchQuery: '',
      filteredFriends: [],
      messages: [],
      newMessage: '',
      currentFriend: null,
      fileList: [],
      activeMenu: '',
    };
  },
  mounted() {
    this.filteredFriends = this.friends;
  },
  methods: {
    searchFriends() {
      if (this.searchQuery) {
        this.filteredFriends = this.friends.filter(friend => friend.name.includes(this.searchQuery));
      } else {
        this.filteredFriends = this.friends;
      }
    },
    chatWithFriend(friendId) {
      this.currentFriend = this.friends.find(friend => friend.id.toString() === friendId);
      this.messages = [
        // Fetch messages with this friend from server
      ];
    },
    sendMessage() {
      if (this.newMessage.trim() === '') return;
      this.messages.push({
        id: Date.now(),
        username: 'User', // Replace with actual user name
        avatar: 'src/assets/images/whm.png', // Replace with actual user avatar
        content: this.newMessage,
        time: new Date().toLocaleString(),
        self: true,
      });
      this.newMessage = '';
    },
    handleUploadSuccess(response, file) {
      this.messages.push({
        id: Date.now(),
        username: 'User', // Replace with actual user name
        avatar: 'src/assets/images/wl.png', // Replace with actual user avatar
        image: URL.createObjectURL(file.raw),
        time: new Date().toLocaleString(),
        self: true,
      });
    },
    addFriend() {
      this.$router.push('/social/addfriend');
    },
  },
};
</script>

<style scoped>
.friends-page {
  padding: 20px;
}

.friends-list {
  height: 100%;
  overflow-y: auto;
}

.friend-name {
  margin-left: 10px;
}

.chat-box {
  height: 100%;
}

.messages {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f5f5;
}

.message {
  display: flex;
  margin-bottom: 10px;
}

.self-message {
  justify-content: flex-end;
  text-align: right;
}

.self-message .message-content {
  margin-right: 10px;
}

.message-content {
  margin-left: 10px;
}

.message-username {
  font-weight: bold;
}

.message-time {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

.uploaded-image {
  max-width: 100px;
  max-height: 100px;
}

.input-area {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.upload-button {
  margin-left: 10px;
}

.self-avatar {
  order: 2;
}
</style>
